<!-- /*
*   @Description:家属信息
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div class="familyInformation_box">
    <searchFrom ref="searchFrom" @forSubmit="forSubmit"></searchFrom>
    <br />
     <!-- 表格组件 -->
     <tableTemplate v-bind="tableConfigObject" class="CHAGE_SCROLLBAR productService_table">
      <template slot="btnSlotName" slot-scope="{ item }">
        <el-button type="text" @click="($event) => buttonClickFunction(item, '查看')">查看</el-button>
        <el-button type="text" @click="($event) => buttonClickFunction(item, '编辑')">编辑</el-button>
        <el-button type="text" @click="($event) => buttonClickFunction(item, '删除')">删除</el-button>
      </template>
    </tableTemplate>
    <!-- 分页组件 -->
    <paginationTemplate
    style="margin: 10px 0px 100px 0px;"
      v-bind="paginationObject" 
      @currentChangeFunction="currentChangeFunction"
    ></paginationTemplate>

    <!-- 弹出框测试 -->
    <taskInFoDialog ref="taskInFoDialogRef" @taskFoDialo="taskFoDialo"></taskInFoDialog>
  </div>
</template>

<script>
import {queryFamilyHttp,delFamilyMessage} from '@/api/oldPeople'
import searchFrom from "@/views/InformationManagement/familyInformation/components/searchFrom.vue";
import taskInFoDialog from "@/views/InformationManagement/familyInformation/components/taskInFoDialog.vue";
import tableTemplate from "@/components/TableTemplate.vue";
import paginationTemplate from "@/components/PaginationTemplate.vue";
import { fromConfig } from "./config/config";
export default {
  name: "familyInformation",
  components: {
    searchFrom,
    tableTemplate,
    paginationTemplate,
    taskInFoDialog
  },
  data() {
    return {
      tableConfigObject: {
        //表头数据
        elTableListData: [],
        // 表头行配置
        elTableListConfig: fromConfig,
        
      },
      // 分页组件使用的数据
      paginationObject: {
        layout: "prev , pager, next, jumper",
        pageSize: 8,
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        total: 0,
      },
    };
  },
  methods:{
    buttonClickFunction(itVal, type) {
      if(type == "编辑" || type == "查看"){
        this.$refs.taskInFoDialogRef?.handleOpen(itVal,type);
      }else if(type == '删除'){
        this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delFamilyMessageFunction(itVal)
        }).catch(()=>{});
      }
    },
    currentChangeFunction(val) {
      this.paginationObject.currentPage = val
      this.getWebData()
    },
    //获取数据
    getWebData(){
      let parmrs = {
        ...this.$refs.searchFrom.getSearchForm(),
        pageSize:this.paginationObject.pageSize,
        currentPage:this.paginationObject.currentPage,
        //查询姓名
        //查询性别
        //一页显示多少条数据
        //目前处于第几页
      }
      queryFamilyHttp(parmrs).then(res=>{
        this.tableConfigObject.elTableListData = res.data.data
        this.paginationObject.total = res.data.totalpage
      })
    },
    //点击了查询
    forSubmit(){
      this.paginationObject.currentPage = 1
      this.getWebData()
    },
    //点击删除
    delFamilyMessageFunction(val){
      delFamilyMessage(val).then(res=>{
        if(res.data.state=='404' || res.data.state=='400')
          this.$notify({title: '提示',message: res.data.message,type: 'error'});
        else this.$notify({title: '提示',message: res.data.message,type: 'success'});
        this.getWebData()
      })
    },
    //编辑完成后刷新和数据
    taskFoDialo(){
      this.getWebData()
    }
  },
  mounted(){
    this.getWebData()
  }
};
</script>

<style scoped lang="less">
.familyInformation_box{
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 16px 30px;
}
.productService_table{
  height: 500px;
}
</style>
